<script setup lang="ts">
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination } from "swiper/modules";
import { PaginationOptions } from "swiper/types";
import "swiper/css";
import "swiper/css/pagination";
import { useRouter } from "vue-router";
const router = useRouter();
const goToVehiclesPage = (from: string) => {
  // 使用路由的 push 方法导航到指定的页面，并传递参数
  router.push({ name: "Vehicles", query: { from } });
};
const goToVehiclesPageL = (from: string) => {
  // 使用路由的 push 方法导航到指定的页面，并传递参数
  router.push({ name: "VehiclesL", query: { from } });
};
// 容器元素
const contentRef = ref<HTMLDivElement | null>(null);

// Swiper 组件插件
const swiperModules = [Autoplay, Pagination];

// Swiper 组件指示器配置
const paginationOptions = <PaginationOptions | boolean>{
  bulletClass: "inline-block bg-gray-300 w-3 h-3 rounded-full mx-1",
  bulletActiveClass: "bg-white !w-12",
  renderBullet: function (_, className) {
    // return '<span class="' + className + '">' + (index + 1) + '</span>';
    return '<span class="' + className + '"></span>';
  },
};

/**
 * 元素平滑顶部.
 * @param {HTMLElement} container
 */
function scrollToElement(container: HTMLElement) {
  container.scrollTo({
    top: 0,
    behavior: "smooth",
  });
}

/**
 * 返回顶部按钮点击事件.
 */
function handleFallbackTop() {
  contentRef !== null && scrollToElement(contentRef.value!);
}
</script>

<template>
  <div
    ref="contentRef"
    class="flex flex-col h-full overflow-y-scroll bg-white gap-y-16 overscroll-contain"
  >
    <!-- <Swiper
    style="width: 70%; margin: auto;"
    class="flex-shrink-0 w-full"
    :autoplay="{
        delay: 2500,
        disableOnInteraction: false,
    }"
    loop
    :pagination="paginationOptions"
    :modules="swiperModules"
>
  
    <SwiperSlide class="h-96">
        <img
            class="inline-block object-cover w-full h-full"
            src="https://lxfile.lingxiuyun.net:9898/russia/assets/temp/images/banner001.jpg"
            alt=""
            
        />
    </SwiperSlide>
</Swiper> -->

    <Swiper
      class="flex-shrink-0 w-full"
      :autoplay="{
        delay: 2500,
        disableOnInteraction: false,
      }"
      loop
      :pagination="paginationOptions"
      :modules="swiperModules"
    >
      <template v-for="(_, index) in 2" :key="index">
        <SwiperSlide class="h-96">
          <img
            class="inline-block object-cover w-full h-full"
            :src="
              'https://lxfile.lingxiuyun.net:9898/russia/assets/temp/images/banner_' +
              (index + 1) +
              '.jpg'
            "
            alt=""
          />
        </SwiperSlide>
      </template>
    </Swiper>

    <div
      class="carRL"
      style="
        width: 71%;
        height: auto;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        bottom: 0.3733rem;
      "
    >
      <!-- 左舵车部分 -->
      <div
        class="left-part"
        style="
          width: 24rem;
          height: 7rem;
          display: flex;
          justify-content: center;
          margin-right: 0.9333rem;
        "
      >
        <img
          src="https://lxfile.lingxiuyun.net:9898/russia/lefts.jpg"
          alt="Left Hand Drive"
          class="lrimg"
          @click="goToVehiclesPageL('left')"
        />
      </div>

      <!-- 右舵车部分 -->
      <div
        class="right-part"
        style="width: 24rem; height: 7rem; display: flex; justify-content: center"
      >
        <img
          src="https://lxfile.lingxiuyun.net:9898/russia/rights.jpg"
          alt="Right Hand Drive"
          class="lrimg"
          @click="goToVehiclesPage('right')"
        />
      </div>
    </div>
    <!-- 图 -->

    <div class="flex-shrink-0 w-full" style="width: 70%; margin: auto; display: block">
      <template v-for="index in 4" :key="index">
        <img
          :src="
            'https://lxfile.lingxiuyun.net:9898/russia/assets/temp/images/content_' +
            index +
            '.jpg'
          "
          :alt="'Image ' + index"
          class="inline-block w-full object-cover1120"
          style="margin-bottom: 0.26666rem; max-width: 100%"
        />
      </template>
    </div>

    <!-- <div class="flex flex-col items-center gap-y-6">
            <span
                class="relative flex justify-end min-w-24 min-h-6 bg-secondary"
            >
                <strong
                    class="absolute top-0 bottom-0 right-0 flex items-center justify-center w-11/12 text-white bg-primary"
                    >合作伙伴</strong
                >
            </span>
            <div class="flex flex-col items-center justify-center">
                <span class="text-2xl"
                    >合作伙伴共同打造汽车座套智能云生态系统</span
                >
                <span class="text-2xl"
                    >Partners work together to build smart cloud ecosystem for
                    car seat cover</span
                >
            </div>
        </div> -->

    <!-- <div class="px-96">
            <div class="grid grid-cols-5 gap-y-6">
                <template v-for="co in 9" :key="co">
                    <span class="flex justify-center">
                        <img
                            class="p-2 border border-dashed w-36 h-11 border-slate-300"
                            :src="
                                'https://lxfile.lingxiuyun.net:9898/russia/assets/icons/cooperate/co_0' +
                                co +
                                '.png'
                            "
                            :alt="co.toString()"
                        />
                    </span>
                </template>
            </div>
        </div> -->

    <div class="flex justify-center gap-x-16">
      <span class="flex flex-col gap-y-4">
        <div class="flex flex-col">
          <strong>电子样板</strong>
          <strong>Electronic templates</strong>
        </div>
        <div class="flex flex-col text-gray-400 gap-y-2">
          <span class="flex flex-col">
            <small>汽车座套</small>
            <small>Car seat cover</small>
          </span>
          <span class="flex flex-col">
            <small>拆装真皮</small>
            <small>Disassemble leather</small>
          </span>
        </div>
      </span>
      <span class="flex flex-col items-center gap-y-4">
        <div class="flex flex-col">
          <strong>平台服务</strong>
          <strong>Platform services</strong>
        </div>

        <div class="flex flex-col text-gray-400 gap-y-2">
          <span class="flex flex-col">
            <small>在线下单平台</small>
            <small>Online single platform</small>
          </span>
          <span class="flex flex-col">
            <small>PC客户端</small>
            <small>PC client</small>
          </span>
          <span class="flex flex-col">
            <small>手机APP</small>
            <small>Mobile apps</small>
          </span>
        </div>
      </span>
      <div class="flex flex-col gap-y-4">
        <span class="flex flex-col">
          <strong>产品案例</strong>
          <strong>Product case</strong>
        </span>

        <div class="flex flex-col text-gray-400 gap-y-2">
          <span class="flex flex-col">
            <small>拆装真皮</small>
            <small>Disassemble leather</small>
          </span>
          <span class="flex flex-col">
            <small>座套</small>
            <small>Seat covers</small>
          </span>
        </div>
      </div>
      <div class="flex flex-col gap-y-4">
        <span class="flex flex-col">
          <strong>我们</strong>
          <strong>Us</strong>
        </span>

        <div class="flex flex-col text-gray-400 gap-y-2">
          <span class="flex flex-col">
            <small>关于领绣</small>
            <small>About LX</small>
          </span>
          <span class="flex flex-col">
            <small>品牌文化</small>
            <small>Brand culture</small></span
          >
          <span class="flex flex-col">
            <small>联系方式</small>
            <small>Contact information</small></span
          >
        </div>
      </div>
      <div class="flex flex-col gap-y-4 w-52">
        <span class="flex flex-col">
          <strong>帮助</strong>
          <strong>Help</strong>
        </span>

        <div class="flex flex-col text-gray-400 gap-y-2">
          <div class="flex items-baseline justify-between">
            <span class="flex flex-col">
              <small>销售电话</small>
              <small>Sales calls</small>
            </span>
            <span>18932577555</span>
          </div>
          <div class="flex items-baseline justify-between">
            <span class="flex flex-col">
              <small>技术咨询</small>
              <small>Technical advice</small>
            </span>
            <span>18932577555</span>
          </div>
          <div class="flex items-baseline justify-between">
            <span class="flex flex-col">
              <small>软件支持</small>
              <small>Software support</small>
            </span>
            <span>17310566315</span>
          </div>
          <div class="flex items-baseline justify-between">
            <span class="flex flex-col">
              <small>合作洽谈</small>
              <small>Cooperation</small>
            </span>
            <span>13833540838</span>
          </div>
        </div>
      </div>
      <div class="flex flex-col gap-y-4">
        <span class="flex flex-col">
          <strong>关注领绣</strong>
          <strong>Attention LX</strong>
        </span>

        <div class="flex flex-col text-gray-400 gap-y-2">
          <img
            class="w-20 h-20"
            src="https://lxfile.lingxiuyun.net:9898/russia/assets/images/lx_qr_code.jpg"
            alt=""
          />
          <div class="flex items-baseline">
            <span class="flex flex-col">
              <small>合作洽谈</small>
              <small>Cooperation</small>
            </span>
            <span>1893257755</span>
          </div>
        </div>
      </div>
    </div>

    <div>
      <a-float-button
        style="bottom: 25rem; right: 2rem"
        shape="square"
        @click="handleFallbackTop"
      >
        <template #icon>
          <img
            class="object-cover w-full h-full"
            src="https://lxfile.lingxiuyun.net:9898/russia/assets/icons/top.png"
            alt=""
          />
        </template>
      </a-float-button>
      <a-float-button-group style="bottom: 14rem; right: 2rem" shape="square">
        <a-popover placement="left">
          <template #content>
            <img
              class="object-contain w-64 h-64"
              src="@/assets/images/lx_qr_code.jpg"
              alt=""
            />
          </template>
          <a-float-button>
            <template #icon>
              <img
                class="object-cover w-full h-full"
                src="https://lxfile.lingxiuyun.net:9898/russia/assets/icons/qr_code.png"
                alt=""
              />
            </template>
          </a-float-button>
        </a-popover>
        <a-popover placement="left">
          <template #content>
            <img
              class="object-contain w-64 h-64"
              src="@/assets/images/kf_qr_code.jpg"
              alt=""
            />
          </template>
          <a-float-button>
            <template #icon>
              <img
                class="object-cover w-full h-full"
                src="https://lxfile.lingxiuyun.net:9898/russia/assets/icons/qr_code.png"
                alt=""
              />
            </template>
          </a-float-button>
        </a-popover>
        <a-float-button>
          <template #icon>
            <img
              class="object-cover w-full h-full"
              src="https://lxfile.lingxiuyun.net:9898/russia/assets/icons/service.png"
              alt=""
            />
          </template>
        </a-float-button>
        <a-float-button>
          <template #icon>
            <img
              class="object-cover w-full h-full"
              src="https://lxfile.lingxiuyun.net:9898/russia/assets/icons/connect.png"
              alt=""
            />
          </template>
        </a-float-button>
      </a-float-button-group>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ant-popover {
  .ant-popover-content {
    .ant-popover-inner {
      padding: 0;
    }
  }
}
// .up {
//   margin-bottom: -20px;
// }

// .lrimg {
//     margin-left: 10px;
//     width: 100%;
//     height: auto; /* 高度自适应以保持宽高比 */
// }
.lrimg {
  cursor: pointer;
  width: 100%;
  height: 100%;
  border-radius: 0.0666666666666667rem;
}
.detilew {
  margin-left: 0.16rem;
  font-size: 0.293rem;
}
.btn {
  position: absolute;
  top: -0.93rem;
  height: 0.733rem;
  width: 1.733rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(18, 63, 255, 1);
  color: #ffffff;
  border: none;
  border-radius: 0.0666rem;
  padding: 0.133rem;
  cursor: pointer; /* 将鼠标移动到按钮上时显示手指光标 */
}
.object-cover1120 {
  object-fit: contain;
}
</style>
